html,
body {
  padding: 0;
  margin: 0;
  font-family: var(--vd-font-family);
  font-size: var(--vd-font-size-h4);
  color: var(--vd-color-font-primary);
}

::-webkit-scrollbar-thumb {
  background: #d3d1cb;
}

::-webkit-scrollbar-track {
  background: #edece9;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: transparent;
}

*::selection {
  background: rgba(35, 131, 226, 0.28);
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

.u-abs-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.u-pointer {
  cursor: pointer;
}

.u-danger {
  color: var(--vd-color-danger);
}

.u-primary {
  color: var(--vd-color-primary);
}

.u-secondary {
  color: var(--vd-color-secondary);
}

.u-warning {
  color: var(--vd-color-warning);
}

.u-info {
  color: var(--vd-color-info);
}

.u-gray-500 {
  color: var(--vd-color-gray-500);
}

.u-gray-800 {
  color: var(--vd-color-gray-800);
}

.u-tc {
  text-align: center;
}

.u-fs-5 {
  font-size: var(--vd-font-size-h5);
}

.u-fs-6 {
  font-size: var(--vd-font-size-h6);
}

.u-ml-xs {
  margin-left: var(--vd-spacing-xs);
}

.u-mt-xs {
  margin-top: var(--vd-spacing-xs);
}

.u-mt-sm {
  margin-top: var(--vd-spacing-sm);
}

.u-mb-xs {
  margin-bottom: var(--vd-spacing-xs);
}

.u-mb-sm {
  margin-bottom: var(--vd-spacing-sm);
}

.u-bold {
  font-weight: bold;
}

.u-fw {
  width: 100%;
}

.u-link {
  color: var(--vd-color-link) !important;
  cursor: pointer;
}

.u-link:hover {
  color: var(--vd-color-link-hover);
  text-decoration: underline;
}

.u-line-clamp-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.u-line-clamp-4 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
